<template>
  <view class="cuHeadBox">
    <nut-navbar :class="options.opcity === 1 ? 'cuHeadInner cuHeadInnerShadow': 'cuHeadInner'" :style="'background: rgb(255,255,255,'+ options.opcity +')'" custom-class="mt-20px" :fixed="true">
      <template #left>
        <view class="headBack" @click="back">
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="arrow_back"/>
        </view>
      </template>
      <template #content>
      <view class="headContent">
        {{ headTitle }}
      </view>
    </template>
    </nut-navbar>
  </view>
</template>

<script lang="ts" setup>
import { onPageScroll, onLoad } from '@dcloudio/uni-app';
import { watch } from 'vue';
const props = defineProps({
  headTitle: {
    type: String,
    default: 'Anonymous'
  },
  opcityTop: {
    type: Number,
    default: 0
  }
});
const app = getApp();
const options = reactive({
  height: 64, //header高度
  top: 0, //标题图标距离顶部距离
  scrollH: 0, //滚动总高度
  opcity: 0,
})

const back = (() => {
  uni.navigateBack()
})
onLoad( () => {
  // options.width = app.globalData.customBar.width;
  // this.height = app.globalData.customBar.height;
  // this.top = app.globalData.customBar.top;
  // this.scrollH = app.globalData.customBar.scrollH;
  console.log('onload', app.globalData.customBar )
})
onPageScroll((res) => {
  if(res.scrollTop < 100){
    options.opcity = res.scrollTop / 100
  }else{
    options.opcity = 1
  }
  // console.log('页面滚动', options.opcity );
  // res 对象包含 scrollTop 和 scrollLeft 属性
});
watch(() => props.opcityTop, (newVal, oldVal) => {
  if(newVal > 0){
    options.opcity = newVal
  }
});
</script>

<style>
  .cuHeadBox{
    height: 40px;
  }
  .cuHeadInner{
    position: fixed !important;
    top: 0;
    width: 100%;
  }
  .cuHeadInnerShadow{
    box-shadow: 0px 1px 7px 0px rgb(237, 238, 241);
  }
  /deep/.nut-navbar{
    background: transparent !important;
    box-shadow: none !important;
  }
  .headBack{
    transform: translateZ(0);
		border: 1rpx solid #f5f5f5;
		background-color: rgba(255, 255, 255, 0.5); /* 透明黑色蒙版 */
		backdrop-filter: blur(8px); /* 背景模糊 */
		padding: 0 10rpx;
		border-radius: 12rpx;
    height: 30rpx;
    line-height: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 30px; */
    color: #666;
  }
  .headContent{
    color: #000;
    /* font-size: 22rpx; */
    font-weight: 600;
  }
</style>
